<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
	<head>
		<title>Move Demo Page</title>
        <style type='text/css'>
            body {font-family: verdana}
            #draggable {
              border: 1px solid red;
              padding: 5px;
              padding-top: 50px;
              width: 150px;
            }
        </style>
	</head>
	<body>

    <div id="draggable">
      Drag me
      <div id="inner">
        <div id="innermost">Innermost div</div>
      </div>
    </div>

		<script type='text/javascript' src='../../../steal/steal.js'>
    </script>

		<script type='text/javascript'>
      steal('jquery/event/move', 'jquery/event/drag').then(function() {
        $('#draggable').on('dragmove', function(ev, drag) {
          $(drag.element).trigger('move');
        });

        $('#innermost').on('move', function(ev) {
          console.log('Moving!');
        });
      });
		</script>
	</body>
</html>